Es gibt zwei wichtige Dinge, die Sie wissen müssen: die Malreihenfolge und den Stapelkontext. Wenn Sie sich auf die Spezifikation beziehen, können Sie herausfinden, wie und wann Elemente gemalt werden.
Stapelkontexte, die durch positionierte Nachkommen mit negativen Z-Indizes (ohne 0) in der Z-Index-Reihenfolge (am negativsten zuerst) und dann in der Baumreihenfolge gebildet werden.
Alle positionierten, Deckkraft- oder Transformationsnachkommen in Baumreihenfolge, die in die folgenden Kategorien fallen:
Alle positionierten Nachkommen mit 'z-index: auto' oder 'z-index: 0' in Baumreihenfolge.
Stapelkontexte, die durch positionierte Nachkommen mit Z-Indizes größer oder gleich 1 in der Z-Index-Reihenfolge (kleinste zuerst) und dann in der Baumreihenfolge gebildet werden.
Daraus ergibt sich, dass wir in Schritt (3) zuerst Elemente mit negativem Z-Index malen, dann in Schritt (8) das mit einem Z-Index von 0 und schließlich in Schritt (9) diejenigen mit positivem Z-Index. , was logisch ist. Wir können auch einen anderen Teil der Spezifikation lesen:
Jede Box gehört zu einem Stapelkontext. Jede Box in einem bestimmten Stapelkontext hat eine ganzzahlige Stapelebene, dh ihre Position auf der Z-Achse relativ zu anderen Boxen im selben Stapelkontext. Boxen mit höheren Stapelebenen werden immer vor Boxen mit niedrigeren Stapelebenen formatiert. Boxen können negative Stapelebenen haben. Boxen mit derselben Stapelebene in einem Stapelkontext werden gemäß der Reihenfolge des Dokumentbaums von unten nach oben gestapelt.
Ebenfalls
Ein Element, das einen lokalen Stapelkontext erstellt, generiert eine Box mit zwei Stapelebenen: eine für den von ihm erstellten Stapelkontext (immer 0) und eine für den Stapelkontext, zu dem es gehört (angegeben durch die Eigenschaft z-index).
Um zu verstehen, wann jedes Element gezeichnet wird, müssen Sie seinen Stapelkontext und seine Stapelebene innerhalb dieses Stapelkontexts kennen (definiert durch den Z-Index). Sie müssen auch wissen, ob dieses Element einen Stapelkontext erstellt. Dies ist der schwierige Teil, da das Festlegen des Z-Index Folgendes bewirkt:
Für ein positioniertes Feld gibt die Eigenschaft z-index Folgendes an:
Die Stapelebene der Box im aktuellen Stapelkontext.
Gibt an, ob die Box einen Stapelkontext erstellt
Werte haben folgende Bedeutung:

Diese Ganzzahl ist die Stapelebene der generierten Box im aktuellen Stapelkontext. Die Box erstellt auch einen neuen Stapelkontext.
Auto
Die Stapelebene der generierten Box im aktuellen Stapelkontext ist 0. Die Box erstellt keinen neuen Stapelkontext, es sei denn, es ist das Stammelement.
Jetzt haben wir alle Informationen, um jeden Fall besser zu verstehen. Wenn das übergeordnete Element einen Z-Index-Wert von etwas anderem als auto hat, wird ein Stapelkontext erstellt, sodass das untergeordnete Element unabhängig von seinem Z-Index (negativ oder positiv) gezeichnet wird. Der Z-Index des untergeordneten Elements gibt lediglich die Reihenfolge des Malens innerhalb des übergeordneten Elements an (dies deckt Ihren zweiten Punkt ab).
Wenn nun nur das untergeordnete Element einen positiven Z-Index hat und wir nichts für das übergeordnete Element festlegen, wird das untergeordnete Element später (in Schritt (9)) und das übergeordnete Element in Schritt (8) unter Berücksichtigung der Malreihenfolge gemalt. Die einzig logische Möglichkeit, das übergeordnete Element oben zu zeichnen, besteht darin, den Z-Index zu erhöhen. Dadurch fallen wir jedoch in den vorherigen Fall, in dem das übergeordnete Element einen Stapelkontext erstellt und das untergeordnete Element dazu gehört.
Es gibt keine Möglichkeit, das übergeordnete Element über einem untergeordneten Element zu haben, wenn ein positiver Z-Index für das untergeordnete Element festgelegt wird. Es gibt auch keine Möglichkeit, das übergeordnete Element über dem untergeordneten Element zu haben, wenn für das übergeordnete Element ein anderer Z-Index als für auto festgelegt wird (entweder positiv oder negativ) .1
Der einzige Fall, in dem ein Kind unter seinem übergeordneten Element liegen kann, besteht darin, einen negativen Z-Index für das untergeordnete Element festzulegen und das übergeordnete Element auf dem Z-Index zu halten: auto. Daher wird in diesem Fall kein Stapelkontext erstellt und die Malreihenfolge eingehalten Kind wird zuerst gemalt.
Neben dem Z-Index gibt es weitere Eigenschaften, die einen Stapelkontext erstellen. Wenn Sie mit einer erwarteten Stapelreihenfolge konfrontiert sind, müssen Sie auch diese Eigenschaften berücksichtigen, um festzustellen, ob ein Stapelkontext erstellt wurde.
Einige wichtige Fakten, die wir aus dem Obigen schließen können:
Stapelkontexte können in anderen Stapelkontexten enthalten sein und zusammen eine Hierarchie von Stapelkontexten erstellen.
Jeder Stapelkontext ist völlig unabhängig von seinen Geschwistern: Bei der Stapelverarbeitung werden nur untergeordnete Elemente berücksichtigt.
Jeder Stapelkontext ist in sich geschlossen: Nachdem der Inhalt des Elements gestapelt wurde, wird das gesamte Element in der Stapelreihenfolge des übergeordneten Stapelkontexts betrachtet. ref
1: Es gibt einige hackige Möglichkeiten, wenn wir die Verwendung der 3D-Transformation in Betracht ziehen.
Beispiel mit einem Element, das unter seinem übergeordneten Element steht, auch wenn für dieses ein Z-Index angegeben ist.
.box {
Position: relativ;
Z-Index: 0;
Höhe: 80px;
Hintergrund: blau;
Transformationsstil: Konservieren-3d; /* Das ist wichtig */
}}
.box> div {
Rand: 0 50px;
Höhe: 100px;
Hintergrund: rot;
Z-Index: -1; / * das bringt nichts * /
transform: translateZ (-1px); / * das wird die Magie machen* /
}}

 

Ein weiteres Beispiel, bei dem wir ein Element zwischen zwei Elementen in einem anderen Stapelkontext platzieren können:
.box {
Position: relativ;
Z-Index: 0;
Höhe: 80px;
Hintergrund: blau;
}}
.box> div {
Rand: 0 50px;
Höhe: 100px;
Hintergrund: rot;
Z-Index: 5;
transformieren: translateZ (2px);
}}
.draußen {
Höhe: 50px;
Hintergrund: grün;
Rand: -10px 40px;
transform: translateZ (1px);
}}
Körper {
Transformationsstil: Konservieren-3d;
}}

 

 
Wir können auch eine verrückte Stapelreihenfolge wie unten haben:
.box {
Breite: 100px;
Höhe: 100px;
Position: absolut;
}}
Körper {
Transformationsstil: Konservieren-3d;
}}
 
 
 
 
Wir sollten beachten, dass die Verwendung eines solchen Hacks einige Nebenwirkungen haben kann, da sich Transformationsstil, Perspektive und Transformation auf die Position auswirken: absolutes / festes Element. Verwandte: CSS-Filter auf Eltern bricht die Positionierung des Kindes
10
|
Eine gute Möglichkeit, darüber nachzudenken, besteht darin, dass jedes übergeordnete Element seinen eigenen Stapelkontext enthält. Geschwisterelemente teilen sich die Stapelreihenfolge eines Elternteils und können sich daher überlappen.
Ein untergeordnetes Element erhält IMMER einen Stapelkontext basierend auf seinem übergeordneten Element. Daher ist ein negativer Z-Index erforderlich, um das Kind "hinter" seinen übergeordneten (0) Stapelkontext zu "schieben".
Die einzige Möglichkeit, ein Element aus dem Kontext seines übergeordneten Elements zu entfernen, ist die Verwendung von position: fixed, da es dadurch im Wesentlichen gezwungen wird, das Fenster für den Kontext zu verwenden.
1
|
Die Mozilla-Dokumentation sagt es
Die CSS-Eigenschaft für den Z-Index legt die Z-Reihenfolge eines positionierten Elements und seiner Nachkommen oder Flex-Elemente fest.
Hier ist eine zusätzliche Logik aus einem anderen StackOverflow-Artikel, der sich auf Kinder und Nachkommen bezieht.
2
|
Wie kann ich dieses Verhalten unter Logik verstehen?
Für mich ist es schwer, Ihr Problem logisch zu verstehen. Ein Elternteil enthält seine Kinder. Eine Schüssel kann von einer anderen Schüssel abgedeckt werden. Aber Sie können die Suppe nicht mit der Schüssel bedecken, wenn Sie die Suppe nicht aus der Schüssel nehmen.
z-Index legt die Reihenfolge für überlappende Elemente fest. Ein Elternteil kann sein Kind nicht überlappen.
ImhO das ist vollkommen logisch.
|
Deine Antwort
StackExchange.ifUsing ("Editor", function () {
StackExchange.using ("externalEditor", function () {
StackExchange.using ("Snippets", function () {
StackExchange.snippets.init ();
});
});
}, "Code Ausschnitte");
StackExchange.ready (function () {
var channelOptions = {
Tags: "" .split (""),
id: "1"
};
initTagRenderer ("". split (""), "" .split (""), channelOptions);
StackExchange.using ("externalEditor", function () {
// Editor muss nach Snippets ausgelöst werden, wenn Snippets aktiviert sind
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using ("Snippets", function () {
createEditor ();
});
}}
sonst {
createEditor ();
}}
});
Funktion createEditor () {
StackExchange.prepareEditor ({
useStacksEditor: false,
heartbeatType: 'Antwort',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: wahr,
showLowRepImageUploadWarning: true,
Ruf zu PostImages: 10,
bindNavPrevention: true,
Postfix: "",
imageUploader: {
brandingHtml: "Powered by \ u003ca href =" https: //imgur.com/ "\ u003e \ u003csvg class =" svg-icon "width =" 50 "height =" 18 "viewBox = "0 0 50 18" fill = "none" xmlns = "http: //www.w3.org/2000/svg" \ u003e \ u003cpath d = "M46.1709 9.17788C46.1709 8.26454 46,2665 7,94324 47,1084 7.58816C47.4091 7,46349 47,7169 7,36433 48,0099 7.26993C48.9099 6,97997 49,672 6,73443 49,672 5.93063C49.672 5,22043 48,9832 4,61182 48,1414 4.61182C47.4335 4,61182 46,7256 4,91628 46,0943 5.50789C45.7307 4,9328 45,2525 4,66231 44,6595 4.66231C43.6264 4,66231 43,1481 5,28821 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \ "/ \ u003e \ u003cpath d = \" M32.492 10.1419C32.492 12.4954 41.5985 12.6954 41.5985 10.1419V6.59049C41.5985 5.28821 41.1394 4.66232 40.1061 4.66232C39.0732 4.66232 38.5948 5.28821 38.5948 6.59049V9.60062C38.5948 10.8521 38.2696 11.5455 37.0455 11.545 521 35.4954 9.60062V6.59049C35.4954 5.28821 35.0173 4.66232 34.0034 4.66232C32.9703 4.66232 32.492 5.28821 32.492 6.59049V10.1419Z = "M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.66231C28.9913 4.662314.459 1369 4,56087 21,0134 6,57349 21,0134 9,27932C21,0134 11,9852 23,003 13,913 25,3754 13,913C26,5612 13,913 27,4607 13,4902 28,1109 12,6616C28,1109 12,7229 28,1161 12,779928.121 12.8346C28.1256 12.8854 28.1301 12.9342 28.1301 12.983C28.1301 14.4373 27.2502 15.2321 25.777 15.2321C24.8349 15.2321 24.1352 14.9821 23.5661 14.7787C23.176 14.6393 22.8472 14.521.224 ZM24.1317 9.27932C24.1317 7.94324 24.9928 7.09766 26.1024 7.09766C27.2119 7.09766 28.0918 7.94324 28.0918 9.27932C28.0918 10.6321 27.2311 11.5116 26.1024 11.5116C24.9737 11.5116 24.1317 \ u00e4. 8045 11.9512C16.8045 13.2535 17.2637 13.8962 18.2965 13.8962C19.3298 13.8962 19.8079 13.2535 19.8079 11.9512V8.12928C19.8079 5.82936 18.4879 4.62866 16.4027 4.62866C15.1594 4.62866 14.279 4.98375 13.3609 5.63.6 7.9466 5.5079C7.58314 4.9328 7.10506 4.66232 6.51203 4.66232C5.47873 4.66232 5.00066 5.28821 5.00066 6.59049V11.9512C5.00066 13.2535 5.47873 13.8962 6.51203 13.8962C7.54479 13.8962 8.0232 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 6.91179C10.5104 6.91179 10.893 7.58817 10.893 8.94108V11.9512C10.893 13.2535 11.3711 13.8962 12.9451 6.91179C16.4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z \ "/ \ u003e \ u003cpath d =" M3.31675 6.59049C3.31675 5.28821 2.83866 4.66232 1.82471 4.66232C0.791758 4.66232 5.335 13.8962 1.82471 13.8962C2.85798 13.8962 3.31675 13.2535 3.31675 11.9512V6.59049Z \ "/ \ u003e \ u003cpath d =" M1.87209 0.400291C0.843612 0.400291 0 1.1159 0 1.98861C0 2.87869 0.822846 3. 1.98861C3.7234 1.1159 2.90056 0.400291 1.87209 0.400291Z "fill =" # 1BB76E "/ \ u003e \ u003c / svg \ u003e \ u003c / a \ u003e",
contentPolicyHtml: "Benutzerbeiträge, lizenziert unter \ u003ca href = \" https: //stackoverflow.com/help/licensing \ "\ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \" https://stackoverflow.com / legal / content-policy \ "\ u003e (Inhaltsrichtlinie) \ u003c / a \ u003e",
allowUrls: true
},
onDemand: wahr,
discardSelector: ".discard-answer"
, sofortShowMarkdownHelp: true, enableTables: true, enableSnippets: true
});
}}
});
Vielen Dank für Ihre Antwort auf Stack Overflow!
Bitte beantworten Sie die Frage unbedingt. Geben Sie Details an und teilen Sie Ihre Forschung!
Aber vermeiden Sie ...
Um Hilfe bitten, Klarheit schaffen oder auf andere Antworten antworten.
Aussagen auf der Grundlage von Meinungen machen; Unterstützen Sie sie mit Referenzen oder persönlichen Erfahrungen.
Weitere Informationen finden Sie in unseren Tipps zum Schreiben großartiger Antworten.
Entwurf gespeichert
Entwurf verworfen
Anmelden oder anmelden
StackExchange.ready (function () {
StackExchange.helpers.onClickDraftSave ('# login-link');
});
Melden Sie sich mit Google an
Melde dich über Facebook an
Melden Sie sich mit E-Mail und Passwort an
einreichen
Post als Gast
Name
Email
Erforderlich, aber nie gezeigt
StackExchange.ready (
function () {
StackExchange.openid.initPostLogin ('. New-post-login', 'https% 3a% 2f% 2fstackoverflow.com% 2fquestions% 2f54897916% 2fwhy-cant-an-element-with-az-index-value-cover-its- child% 23new-answer ',' question_page ');
}}
);
Post als Gast
Name
Email
Erforderlich, aber nie gezeigt
Veröffentlichen Sie Ihre Antwort
Verwerfen
Wenn Sie auf "Antwort posten" klicken, stimmen Sie unseren Nutzungsbedingungen, Datenschutzbestimmungen und Cookie-Richtlinien zu
Nicht die Antwort, die Sie suchen? Durchsuchen Sie andere Fragen mit dem Tag css css-position z-index oder stellen Sie Ihre eigene Frage.